<template>
  <div>
    <el-tag
      :key="tag.data_id"
      v-for="tag in oneData"
      closable
      :disable-transitions="false"
      @close="handleClose(tag)"
      :effect="oneColor(tag)"
      @click="choeseOneTag(tag)"
    >
      {{ tag.name }}
    </el-tag>
    <div>
      <el-input
        class="input-new-tag"
        v-if="oneAddVisible"
        v-model="oneAddValue"
        ref="saveOneTagAdd"
        size="small"
        @keyup.enter.native="handleAddConfirm('one')"
        @blur="handleAddConfirm('one')"
      ></el-input>
      <el-button v-else class="button-new-tag" size="small" @click="showOneAdd">新建艺术类型</el-button>

      <el-input
        class="input-new-tag"
        v-if="oneUpdVisible"
        v-model="oneUpdValue"
        ref="saveOneTagUpd"
        size="small"
        @keyup.enter.native="handleUpdConfirm('one')"
        @blur="handleUpdConfirm('one')"
      ></el-input>
      <el-button v-else class="button-new-tag" size="small" @click="showOneUpd">编辑艺术类型</el-button>
    </div>
  </div>
</template>

<script>
  import { areistTypeManage } from '@/api/type';
  export default {
    data() {
      return {
        oneData: [],

        oneAddVisible: false,
        oneAddValue: '',
        oneUpdVisible: false,
        oneUpdValue: '',
        oneId: '',
      };
    },
    async mounted() {
      await this.getTag(-1);
    },
    methods: {
      oneColor(tag) {
        return this.oneId === tag.data_id ? 'dark' : 'plain';
      },
      choeseOneTag(tag) {
        this.oneId = tag?.data_id;
        this.getTag(this.oneId);
      },
      async getTag(id) {
        let res = await areistTypeManage.getType({ parent_id: id, notPagination: true });
        if (id === -1) {
          this.oneData = res.item_list;
        } else {
          this.twoData = res.item_list;
        }
      },
      async handleClose(tag) {
        this.$alert('是否确定删除分类：' + tag.name, '删除', {
          confirmButtonText: '确定',
          callback: async (action) => {
            if (action === 'confirm') {
              if (tag.data_id === this.oneId) {
                this.oneId = '';
                this.twoId = '';
              }
              await areistTypeManage.delType(tag.data_id);
              this.getTag(tag.parent_id === -1 ? -1 : this.oneId);
            }
          },
        });
      },
      showOneAdd() {
        this.oneAddVisible = true;
        this.$nextTick(() => {
          this.$refs.saveOneTagAdd.$refs.input.focus();
        });
      },
      showOneUpd() {
        if (!this.oneId) {
          return;
        }
        this.oneUpdVisible = true;
        this.$nextTick(() => {
          this.$refs.saveOneTagUpd.$refs.input.focus();
        });
      },

      async handleAddConfirm(type) {
        let value = '';
        if (type === 'one') {
          value = this.oneAddValue;
        } else {
          value = this.twoAddValue;
        }
        if (value) {
          await areistTypeManage.setType({ name: value, parent_id: type === 'one' ? -1 : this.oneId });
          this.getTag(type === 'one' ? -1 : this.oneId);
        }
        this.oneAddVisible = false;
        this.oneAddValue = '';
        this.twoAddVisible = false;
        this.twoAddValue = '';
      },

      async handleUpdConfirm(type) {
        let value = '';
        if (type === 'one') {
          value = this.oneUpdValue;
        } else {
          value = this.twoUpdValue;
        }
        if (value) {
          await areistTypeManage.updType(type === 'one' ? this.oneId : this.twoId, {
            name: value,
            parent_id: type === 'one' ? -1 : this.oneId,
          });
          this.getTag(type === 'one' ? -1 : this.oneId);
        }
        this.oneUpdVisible = false;
        this.oneUpdValue = '';
        this.twoUpdVisible = false;
        this.twoUpdValue = '';
      },
    },
  };
</script>

<style lang="less" scoped>
  .el-tag {
    margin: 10px;
    cursor: pointer;
  }
  .button-new-tag {
    margin: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    margin: 10px;
    width: 90px;
    vertical-align: bottom;
  }
</style>
